<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title><?php echo $title; ?></title>
    <base href="<?php echo base_url(); ?>">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="/js/plugins/jquery.js"></script>
    <link href="/public/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="/public/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="/public/js/plugins/sortable.js" type="text/javascript"></script>
    <script src="/public/js/fileinput.min.js" type="text/javascript"></script>
    <script src="/public/js/locales/fr.js" type="text/javascript"></script>
    <script src="/public/js/locales/es.js" type="text/javascript"></script>
    <script src="/public/themes/explorer-fa/theme.js" type="text/javascript"></script>
    <script src="/public/themes/fa/theme.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body class="iframe-body">
<!--{ 新增 -->
<div class="row">
    <div class="col-sm-12">
        <form class="form-horizontal" id="add_form" role="form" method="post" enctype="multipart/form-data" action="">
                <div class="form-group">
                    <label class="col-sm-2 control-label">
                        <samp class="f-samp">*</samp>VR名称</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                </div>
                <!-- <div class="form-group">
                    <label class="col-sm-3 control-label">VR图</label>
                    <div class="col-sm-9">
                        <img class="fn-mb-15" id="upload_img" src="" width="100" style="display:none;"/>
                        <button type="button" class="layui-btn" id="upload" data-name="userfile">
                          <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                    </div>
                </div>       -->

                <div class="form-group">
                    <form enctype="multipart/form-data">
                        <div class="form-group">
                            <label class="col-sm-2 control-label labell">图片上传</label>
                            <div class="col-sm-9">
                                <input id="imgUpload" name="imgUpload" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1">
                            </div>
                        </div>
                    </form>


                    <label class="col-sm-2 control-label labell"></label>
                    <div class="col-sm-2">
                        <button type="button" class="btn btn-block btn-primary" id="upload_img">上传图片</button>
                    </div>
                    <div class="col-sm-2">
                        <button type="button" class="btn btn-block btn-primary " id="publish_img" disabled="true" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> 持续发布中......">立即发布
                        </button>
                    </div>
                </div>

                          
                <!-- <div class="form-group">
                    <label class="col-sm-2 control-label labell">状态</label>
                    <div class="col-sm-9" style="padding-top:7px">
                        隐藏
                        <input name="status" type="radio" value="0" checked/>&nbsp;&nbsp;&nbsp; 显示
                        <input name="status" type="radio" value="1" />
                    </div>
                </div> -->
                <input id="vtour_site" type="hidden" name="vtour_site">
                <input id="vtour_view" type="hidden" name="vtour_view">
                <div class="form-group">
                <!-- <input type="submit" id="fileSubmit" name="Submit" class="btn btn-success col-sm-1 col-sm-offset-5" value="提交" /> -->
                </div>
            </form>
    </div>
</div>
<!--/ 新增用户 }-->

<script src="/js/plugins/layer/layer.js"></script>
<!-- <script src="/js/common.js"></script> -->
<script>
    var parentURL = window.parent.location.href;
    var timestamp = 0;
    var index = 1;

    $("#imgUpload").fileinput({
            language: 'zh',
            showUpload: false,
            showRemove: false,
            showCancel: false,
            showCaption: false,
            showUploadedThumbs: false,
            maxFileCount: 30,
            previewFileType: "image",
            allowedFileExtensions: ["jpg", "jpeg", "tif", "tiff"],
            msgInvalidFileExtension: '不支持文件类型"{name}"。只支持扩展名为"{extensions}"的文件。',
            browseClass: "btn btn-primary",
            browseLabel: "选择本地全景图片",
            // browseIcon: "<i class=\"icon icon-picture\"></i> ",
            removeClass: "btn btn-danger",
            removeLabel: "删除",
            // removeIcon: "<i class=\"icon icon-trash\"></i> ",
            uploadUrl: '/vtour/do_upload',
            uploadAsync: true,
            fileActionSettings: {},
            dropZoneTitle: "拖拽一组/单幅图片或点击下面按钮上传",
            textEncoding: "UTF-8",
            uploadExtraData: function (previwId) {
                var data = {
                    title: $.trim($("#pname").val()),
                    timestamp: timestamp
                }
                if (previwId != null) {
                    data.index = index++;
                }

                return data;
            }
        }
    ).on("fileuploaded", function (event, data, index) {
        var response = data.response;
        console.log(response);
        if (response != null && response.ack) {
            console.log(index);
            $("#publish_img").attr("disabled", false);
        } else {
            alert('保存失败！');
        }
    });

    $("#upload_img").click(function () {
        timestamp = new Date().getTime();
        var files = $('#imgUpload').fileinput('getFileStack');
        if (files.length > 0) {
            $("#imgUpload").fileinput("upload");
        }
    })

    $("#publish_img").click(function () {
        if($('#name').val() == ''){
            layer.msg('请填写VR图名');
            return;
        }
        var $this = $(this);
        $this.button('loading');
        $.ajax({
            url: '/vtour/make',
            type: "post",
            dataType: "json",
            data: {
                timestamp: timestamp
            },
            error: function (error) {
                console.log(error)
            },
            success: function (data) {
                if (data.data.status == "success") {
                    var temp = timestamp;
                    timestamp = 0;
                    $this.button('reset');
                    $this.attr("disabled", false);
                    var vtour_url = "/public/data/" + temp + "/vtour/tour_editor.php?title=" + temp;
                    var vtour_view = "/public/data/" + temp + "/vtour/tour.html";
                    $('#vtour_site').val(vtour_url);
                    $('#vtour_view').val(vtour_view);                    
                    //执行插入函数
                    addVtour();
                    
                    // window.parent.location.reload(parentURL);
                    // window.location = "/public/data/" + temp + "/vtour/tour_editor.html?title=" + temp;
                }
            }
        })
    })       

    $('#add_form').submit(function(){   
        var datas = $('#add_form').serialize();
        
        return false;
    }); 
    function addVtour(){        
        var datas = {"name":$('#name').val(),"vtour_site":$('#vtour_site').val(),"vtour_view":$('#vtour_view').val()}
        $.ajax({
            url:"vtour/create",
            type:"post",
            data: datas,
            dataType:"json",
            success: function (data) {
                if (data.ack == true) {
                    layer.msg(data.msg, {time: 1200}, function () {
                        //成功后重新刷新父级页面
                        window.parent.location.reload(parentURL);
                    });
                }else{
                    layer.msg(data.msg, {time: 1200});
                }
            }
        });
    }
</script>
</body>
</html>
